import {Swiper} from "antd-mobile";
import Header from "../../components/Header";
import Tab from "../../components/Tab";
import './index.scss';
import {useEffect, useState, useTransition} from "react";
import {recommendArticle, recommendLiterature} from "../../api/api";
import LiteratureList from "../../components/LiteratureList";
import {useNavigate} from "react-router-dom";
import RequestLoading from "../../components/RequestLoading";

const Home = () => {
    const [loading, sartTransition] = useTransition();
    const [articleData, setArticleData] = useState<Array<any>>([]);
    const [literatureData, setLiteratureData] = useState<Array<any>>([]);
    const n = useNavigate();
    // 推荐文章
    const getArticle = () => {
        recommendArticle().then(r => setArticleData(r));
    }
    // 推荐文献
    const getLiterature = () => {
        recommendLiterature().then(r => {
            r = r.map((v: any) => {
                return {
                    ...v,
                    cover_url: v.cover.path
                }
            });
            setLiteratureData(r);
        });
    }
    useEffect(() => {
        sartTransition(() => {
            getArticle();
            getLiterature();
        })
    }, [])
    return (
        <div className="home-box">
            <Header back={null} title="首页"/>
            {
                loading ? <RequestLoading/> : (
                    <>
                        {/*推荐的文章*/}
                        <div>
                            <Swiper autoplay={true} loop={true} style={{
                                '--track-padding': ' 0 0 16px',
                            }}>
                                {
                                    articleData.map((v: any, index: number) => {
                                        return (
                                            <Swiper.Item key={v.id} onClick={() => n(`/article/${v.id}`)}>
                                                <div className="banner-inner">
                                                    <img src={v.cover.path} alt=""/>
                                                    <p>{v.name}</p>
                                                </div>
                                            </Swiper.Item>
                                        )
                                    })
                                }
                            </Swiper>
                        </div>
                        {/*推荐的文献*/}
                        <div className="home-literature">
                            <h2>大家爱看</h2>
                            <LiteratureList data={literatureData}/>
                        </div>
                    </>
                )
            }
            <Tab/>
        </div>
    )
}

export default Home;